<!DOCTYPE html>
<html>

	<head>
		<meta charset="utf-8">
		<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
		<title></title>
		<script src="../script/mui.min.js"></script>
		<link href="../css/mui.min.css" rel="stylesheet" />
		<link rel="stylesheet" type="text/css" href="../css/app.css" />
		<style type="text/css">
			body {
				color: #3E9FEC;
				background-color: #FFF;
			}
			
			.mui-bar-nav {
				-webkit-box-shadow: none;
				box-shadow: none;
			}
			
			.mui-bar {
				-webkit-box-shadow: none;
				box-shadow: none;
			}
			
			.wrong {
				color: #e02a53
			}
			
			.undo {
				color: #4fd2c2;
			}
			
			.item-col {
				width: 20%;
				float: left;
				margin-top: 15px;
				margin-bottom: 10px;
			}
			
			.item {
				background-color: #f0f0f0;
				width: 32px;
				height: 32px;
				font-size: 14px;
				line-height: 32px;
				text-align: center;
				border-radius: 16px;
				margin: 0px auto;
			}
			
			#result{
				visibility: hidden;
			}
			
			.itempad {
				margin-top: 80px;
				padding: 5px 30px;
			}
			
			.items-row {}
			
			.mui-btn-positive {
				background-color: #4fd2c2;
				border: 1px solid #4fd2c2;
			}
		</style>
	</head>

	<body>
		<header class="mui-bar mui-bar-nav">
			<div style="width:50px;margin:0px auto;">
				<a id="hide" class="mui-icon mui-icon-arrowdown" style="color: #dddddd;font-size:50px;"></a>
			</div>
		</header>
		<div class="itempad" >
			<div style="text-align: center;" id="result">
				<span>答对&nbsp;<span id="right">0</span></span>&nbsp;&nbsp;
				<span>答错&nbsp;<span class="wrong" id="wrong">0</span></span>&nbsp;&nbsp;
				<span>未答&nbsp;<span class="undo" id="undo">0</span></span>
			</div>
			<div class="items">
				<div class="items-row" id="itemslist">
				</div>
				<div class="clearfix"></div>
				<!--<div class="items-row" style="width: 50%;margin: 25px auto;">
					<button class="mui-btn mui-btn-positive" style="width: 100%;" id="clear">清空答题记录</button>
				</div>-->
			</div>
		</div>
		<script type="text/html" id="qitem">
			{{each}}
			<div class="item-col" onclick="toPage({{$index+1}})">
				<div class="item undo" id="{{$value.id}}">
					{{$index+1}}
				</div>
			</div>
			{{/each}}
		</script>
		<script src="../script/db.js" type="text/javascript" charset="utf-8"></script>
		<script src="../script/template.js" type="text/javascript" charset="utf-8"></script>
		<script src="../script/lokijs.min.js" type="text/javascript" charset="utf-8"></script>
		<script type="text/javascript">
			MYPAGE = {};

			function renderQuestion(data) {
				var html = template('qitem', data);
				var total = data.length;
				document.getElementById("itemslist").innerHTML = html;
//				alert(JSON.stringify(MYPAGE));
				if (MYPAGE.type != "random") {
					var lessonArr = MYPAGE.target.split("/");
					var lesson = lessonArr[1].replace('lesson-', '');
					var q = {
						'lesson': parseInt(lesson)
					};
					var db = new loki('data');
					db.loadDatabase({}, function() {
						var c = db.getCollection('answers');
						if (c == null) {
							c = db.addCollection('answers');
						}
						//					alert(JSON.stringify(c.data));
						var data = c.find(q);
						//					alert(JSON.stringify(data));
						var length = data.length;
						for (var i = 0; i < length; i++) {
							if (data[i].result == 0) {
								var id = data[i].qid + "";
								var qitem = document.getElementById(id);
								if (qitem) {
									qitem.className = "item wrong";
								}
							}
							if (data[i].result == 1) {
								var id = data[i].qid + "";
								var qitem = document.getElementById(id);
								if (qitem) {
									qitem.className = "item";
								}
							}
						}
						var wrong = data.filter(function(item) {
							return item.result == 0;
						});
						var right = data.filter(function(item) {
							return item.result == 1;
						});
						var wlength = wrong.length;
						var rlength = right.length;
						var undolength = total - wlength - rlength;
						document.getElementById("wrong").innerHTML = wlength;
						document.getElementById("right").innerHTML = rlength;
						document.getElementById("undo").innerHTML = undolength;
						//					document.getElementById("clear").addEventListener('tap', function() {
						//						c.removeWhere(q);
						//					});
						document.getElementById("result").style.visibility="visible";
					});
				}else{
					document.getElementById("result").style.display="none";
				}
			}

			function toPage(pageNo) {
				api.setFrameAttr({
					name: 'page',
					hidden: true
				});
				api.setFrameAttr({
					name: 'mask',
					hidden: true
				});
				api.sendEvent({
					name: "toPageIndex",
					extra: {
						pageno: pageNo,
					}
				});
			}

			function loadResulst() {
				var data = JSON.parse(localStorage.getItem('current'));
				renderQuestion(data);
			}
			apiready = function() {
				var data = api.pageParam;
				MYPAGE.target = data.target;
				MYPAGE.type = data.type;
				loadResulst();
				api.addEventListener({
					name: 'PageIndexTouched'
				}, function(ret, err) {
					loadResulst();
				});
				document.getElementById("hide").addEventListener('tap', function() {
					api.setFrameAttr({
						name: 'page',
						hidden: true
					});
					api.setFrameAttr({
						name: 'mask',
						hidden: true
					});
				});
			};
		</script>
	</body>

</html>